import React, { useRef, useState } from 'react'
import Menu from '@/views/Menu'
import '@/assets/css/index.scoped.css'

const Component = () =>
{   
    const [coupon, setCoupon] = React.useState([])
    const [hotelRoom, setHotelRoom] = React.useState([])
    let [hasMore, SethasMore] = useState(true)
    let [page, SetPage] = useState(1)
    let keyword = useRef('');//阻止搜索时闪烁问题

    React.useEffect(()=>{
        getCoupon()
    },[])
    async function getCoupon()
    {
        //调用接口
        var result = await React.request.post('/coupon/index')

        if(result.msg == 0){
            React.toast(result.msg);
            return false;
        }
        setCoupon(result.data.coupon)
        
    }

    //下拉刷新
    const onRefresh = async () =>
    {
      SetPage(1)
      SethasMore(true) //后面还有数据
      setHotelRoom([])

      getHotel()

    }
  
    //上拉加载
    const loadMore = async () =>
    {
      getHotel()
    }
    const search = (e) => {
        //阻止元素的默认功能
        e.preventDefault()
        onRefresh()
    }
    const getHotel = async ()=>
    {
        // console.log(keyword.current.value);//获取input
        var params = {
            keyword:keyword.current.value,
            page:page
        }
        var result = await React.request.post('/index/hotel',params)
        if(result.code == 0){
            SethasMore(false)
            return false;
        }
        SetPage(++page)
        SethasMore(true) //后面还有数据
        setHotelRoom(hotelRoom.concat(result.data.hotelRoom))//合并保留上一页的状态
    }

    return (
    <>
        {/* 优惠券 */}
        <React.UI.Swiper loop>
            {
                coupon.map((item, index)=>{
                    return(
                        <React.UI.Swiper.Item onClick={() => React.navigate(`/couponInfo?cid=${item.id}`)} key={index}>
                            <React.UI.Image src={item.thumb_text} width={'100%'} height={'200px'} fit='cover' />
                        </React.UI.Swiper.Item>
                    )
                })
            }
        </React.UI.Swiper>
        {/* 搜索 */}
        <form className="hotel_search" onSubmit={search}>
            <input type="text" placeholder="请输入关键词搜索" ref={keyword}/>
        </form>
        {/* 下拉列表 */}
      <React.UI.PullToRefresh onRefresh={onRefresh}>
        <div className="hotellist">
            {
                hotelRoom.map((item,key)=>{
                    return(
                        <div className="item" key={key}>
                            <Link to="/food/info">
                                <div className="images">
                                    <div className="swipers">
                                        <img src={item.thumb_text} />
                                    </div>
                                    <div className="title">{item.name}</div>
                                </div>
                                {/* 标签 */}
                                <div className='taglist'>
                                {/* 间距 */}
                                <React.UI.Space>
                                {item.flag_text.length>0 && item.flag_text.map((val,k)=>(<React.UI.Tag color='success' key={k}>{val}</React.UI.Tag>))}
                                </React.UI.Space>
                                </div>

                                <div className="item_bot">
                                    <div className="font">
                                        <span className="price">￥{item.price}</span>
                                    </div>
                                    <div className="btn">立即下单</div>
                                </div>
                            </Link>
                        </div>
                    )
                })
            }
        </div>
       
      </React.UI.PullToRefresh>
        {/* 上拉加载  loadMore加载更多的回调函数 hasMore 是否还有更多内容*/}
        <React.UI.InfiniteScroll loadMore={loadMore} hasMore={hasMore} threshold={0} />

        <Menu />
    </>
    )
}

export default Component